<template>
    <div class="login">
        <div class="login-area">
            <div class="img">
                <img src="../../assets/imgs/logo.png">
            </div>

            <div class="login-form">
                <form @submit.prevent="login">
                    <div class="form-item-list">
                        <div class="form-item">
                            <input placeholder="accout" type="text" v-model="formObj.loginId">
                        </div>
                        <div class="form-item">
                            <input placeholder="otp" type="password"  v-model="formObj.passcode">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-blue">登录</button>
                </form>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
  @import "../../less/mixins";
  @import "../../less/variables";
  @fontBorder:1px solid #e6e6e6;
  .login{

    min-height: 100%;
    background: #2b3643;

  }
  .login-area{
    width: 300px;
    margin: 0 auto;
    .img{
       padding-top:200px;
       text-align: center;
    }
  }
  .login-form {
    margin-top:60px;
    .form-item-list{
      border:@fontBorder;
    }
    .btn{
      margin-top:40px;
      height:40px;
      width: 300px;
    }
    .form-item{
      border-bottom: @fontBorder;
    }
    input{
      display: inline-block;
      width: 100%;
      padding-left:20px;
      height: 45px;
      line-height:45px;
      border:none;
    }
    .verify-item{
      position: relative;
      //background-color: @white;
      input{
        width: 205px;
      }
       span{
        position: absolute;
        right:0;
        top:0;
        display: inline-block;
        padding: 7px 0;
        background: @white;
        width: 93px ;
        border-left:1px solid #ececec;
        cursor: pointer;
      }
    }
  }
</style>
<script>
    import { mapActions } from 'vuex'
    export default{
        data(){
            return{
                formObj: {
                    loginId: '',
                    passcode: '',
                }
            }
        },
        computed: {
            verifyCodeSrc () {
                return this.$store.state.User.verifyCodeUrl;
            }
        },
        methods: {
            login () {
                if(this.formObj.loginId == ''){
                    this.$message.error({message:'请输入用户名！' });
                    return;
                }else if(this.formObj.password == ''){
                    this.$message.error({message: '请输入OTP！' });
                    return;
                }

                this.setLoadingText('正在登录...')
                this.$http.post('/login',{obj:JSON.stringify(this.formObj)})
                    .then(res=>{
                        var result = res.body;
                        if(result.Success){
                            this.$message.success({message: '登录成功！' });
                            this.$router.replace('/user/list');
                        }else{
                            this.$message.error({message: "校验失败" });
                        }
                    },res=>{
                          this.$message.error({message: res.statusText });
                    })

                return false;
            },
             ...mapActions(['signIn','setLoadingText','changeVerify','setElements'])
        }
    }
</script>
